﻿@model MobileModel
@{
    ViewBag.Title = "手机认证";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<section class="pe-basic">

    @Html.Partial("_PersonalPartial")

    <div class="content">
        <h4>手机认证</h4>
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
            <div class="field">
                <div class="editor-label">
                    @Html.LabelFor(model => model.Mobile) @Html.ValidationMessageFor(model => model.Mobile)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Mobile)
                </div>

                <div class="editor-field" style="padding-top: 10px">
                    <input id="GetVerificationCode" type="button" value="获取验证码" />
                    <span id="SuccessMessage" style="display: none;"><span id="Reciprocator">60</span>秒后可重新获取</span>
                    <div style="display: none;"><span id="ErrorMessage"></span></div>
                </div>
            </div>
            <div class="field">
                <div class="editor-label">
                    @Html.LabelFor(model => model.VerificationCode) @Html.ValidationMessageFor(model => model.VerificationCode)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.VerificationCode)

                </div>
            </div>
            <div class="field">
                <div class="editor-label">
                </div>
                <div class="editor-field">
                    <input type="submit" value="保存" />@Html.ActionLink("继续下一步", "Photograph")
                </div>
            </div>
        }
    </div>
</section>
<script type="text/javascript">
    var time = 60000;

    function coolDown() {
        var cd = setTimeout(function () {
            if (time > 0) {
                time = time - 1000;
                $('#Reciprocator').text(time / 1000);
                coolDown();
            }
            else {
                time = 60000;
                $('#SuccessMessage').hide();
                clearTimeout(cd);
            }
        }, 1000);
        return cd;
    }

    function disableCode(disabled) {
        $('#GetVerificationCode').attr('disabled', disabled);
    }

    $(function () {
        $('#GetVerificationCode').click(function () {
            $.ajax({
                url: 'VerifyCode',
                type: 'POST',
                data: {
                    Mobile: $('#Mobile').val()
                },
                success: function (data) {
                    if (data === true) {
                        $('#SuccessMessage').show();
                        var dc = setTimeout(function () { disableCode(false) }, 61000);
                    }
                    else {
                        $('#ErrorMessage').text(data.join(', ')).fancybox();
                    }
                    coolDown();
                }
            });
            disableCode(true);
        });
    });

</script>
